<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一个简单的相册</title>
    <style>
body{
    width: 100vw;
}
        #imgwrap{
            width: 90vw;
            margin: 0px auto;
            perspective: 90vw;
        }
        .img{
        width: 30vw;
        height: 30vw;
        float: left;
         }
         .fudong{
            clear:both;
         }
         #btn{
            
            width: 100px;
            text-align: center;
            font: 10px/40px "微软雅黑";
            color: #fff;
            padding: 0 20px;
            background: rgb(0, 100, 0);
            margin: 50px auto;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
         }
    </style>
</head>
<body>
    <div id="imgwrap">
        <img class="img" src="images/1.jpg" alt="">
        <img class="img" src="images/2.jpg" alt="">
        <img class="img" src="images/3.jpg" alt="">
        <img class="img" src="images/4.jpg" alt="">
        <img class="img" src="images/5.jpg" alt="">
        <img class="img" src="images/6.jpg" alt="">
        <img class="img" src="images/7.jpg" alt="">
        <img class="img" src="images/8.jpg" alt="">
        <img class="img" src="images/9.jpg" alt="">
        <img class="img" src="images/10.jpg" alt="">
        <img class="img" src="images/11.jpg" alt="">
        <img class="img" src="images/12.jpg" alt="">
    </div>
    <div class="fudong"></div>
    <div id="btn">点击查看效果</div>
    <audio autoplay="autoplay">
        <source src="audio/1.mp3" />
    </audio>
    <script>
    window.onload=function(){
        var btn=document.getElementById("btn");
        var imgs=document.querySelectorAll("img");
        var on=true;//y用来决定是否可以再次点击
        btn.onclick=function(){
            if(!on){
                return;
            }
            on=false;
            var endNum=0;
            var allEnd=0;//用来判断所有的图片是否都运动完了
            for(var i=0;i<imgs.length;i++){
            (function(i){
                setTimeout(function(){
                montion(imgs[i],"10ms",function(){
                    this.style.transform="scale(0)";
                },function(){
                    //第二个运动
                    montion(this,"1s",function(){
                        this.style.transform="scale(1)";
                        this.style.opacity=0;
                    },function(){
                        endNum++;
                        if(endNum==imgs.length){
                            toBig();
                        }
                    });
                });
                    },Math.random()*1000);
            })(i)
         }
         function toBig(){
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.transition="";
            imgs[i].style.transform="rotateY(0deg) translateZ(-"+Math.random()*500+"px)";
    
    (function(i){
        setTimeout(function(){
            montion(imgs[i],"2s",function(){
                this.style.opacity=1;
                this.style.transform="rotateY(-360deg) translateZ(0)";
            },function(){
                allEnd++;
                if(allEnd==imgs.length){
                    //所有图片运动完
                    on=true;
                }
            })
        },Math.random()*1000);
    })(i);
        }
    };
    };
    

        //运动函数(对象，时间，属性，运动完做的事情)
        function montion(obj,time,doFn,callBack){
            obj.style.transition=time;
            doFn.call(obj); //调用函数,并把this的指向给obj
            var called=false;
            obj.addEventListener("transitionend",function(){
                if(!called){
                    callBack&&callBack.call(obj);
                    called=true;
                }
            },false);
        }
    };
    </script>
</body>
</html>